<script setup>
	import FirstTitle from "@comp/FirstTitle";
	import {
		Editor,
		Toolbar
	} from "@wangeditor/editor-for-vue";
	import {
		onMounted
	} from "vue";
	import {
		postTableData
	} from "@/api/table";
	
	
	import {
		searchDataZhbz
	} from "@/api/search";
	import {
		addOrUpdateZhbz
	} from "@/api/addOrUpdate";
	
	const city = window.globalObj.name;


	const editorRef = shallowRef();
	const toolbarConfig = {};
	const editorConfig = {
		placeholder: "请输入内容..."
	};
	const mode = ref("default");

	// 加载html
	const initHtml = () => {
		searchDataZhbz({
			m: "任务需求-交通运输保障需求"
		}).then((res) => {
			const {
				data
			} = res
			valueHtml.value = data.find((x) => x.k === "交通运输保障需求")?.v || "";
		})
	};

	const handleCreated = (editor) => {
		editorRef.value = editor; // 记录 editor 实例，重要！
	};

	const valueHtml = ref(
		"按疏散城市人口的XX%计算，共需客车（按XX座计算）XX台次，现有XX台次，差额XX台次；需货车（按每台载重XX吨，每人携带物品XXkg计算）XX台次，现有XX台次，满足需求。具体情况如下："
	);


	const saveProgramme = () => {
		ElMessageBox.confirm(`确定要保存吗?`, "警告", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			customClass: "message-box",
		}).then(() => {
			addOrUpdateZhbz({
					m: "任务需求-交通运输保障需求",
					data: [{
						k: "交通运输保障需求",
						v: valueHtml.value,
					}],
				})
				.then((result) => {
					if (result.code === 200) {
						ElMessage.success("操作成功");
						initHtml();
					} else {
						ElMessage.error(result.msg);
					}
				})
				.catch(() => {});
		});
	}


	onBeforeUnmount(() => {
		const editor = editorRef.value;
		if (!editor) return;
		editor.destroy();
	});

	// 表头单元格样式
	const headerCellStyle = () => {
		return {
			backgroundColor: "#f5f7fa",
			color: "rgba(0,0,0,0.85)",
			fontSize: "14px",
			height: "54px",
		};
	};
	// 单元格样式
	const cellStyle = () => {
		return {
			color: "rgba(0,0,0,0.65)",
			fontSize: "14px",
			lineHeight: "22px",
		};
	};

	const tableData = ref([])
	// const getList = () => {
	// 	postTableData({
	// 		docType: "comprehensiveSupport",
	// 		method: "Jiaotongyunlixuqiuqingdan",
	// 	}).then(result=>{
	// 		if(result.code === 200){
	// 			tableData.value = result.data
	// 		}
	// 	})
	// }

	// getList()


	onMounted(() => {
		initHtml()
	})
</script>
<template>
	<div class="">
		<FirstTitle name="交通运输保障需求" />

		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
				:mode="mode" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
				:mode="mode" @onCreated="handleCreated" />
		</div>

		<!-- <div class="top-15">
		</div> -->
		<!-- <div class="top-15 text-center">
			{{city}}交通运力需求清单（单位:台次）
		</div> -->
		<!-- <el-table id="table" :data="tableData" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border >
			<el-table-column prop="rowNum" label="序号" width="100" align="center" />
			<el-table-column prop="jd_name" label="行政区域" />
			<el-table-column  label="客车">
				<el-table-column prop="xykcsl" label="需求数" />
				<el-table-column prop="k_car_count" label="现有数" />
				<el-table-column prop="k_diff" label="差额数" />
			</el-table-column>
			<el-table-column  label="货车">
				<el-table-column prop="xyhcsl" label="需求数" />
				<el-table-column prop="h_car_count" label="现有数" />
				<el-table-column prop="h_kiff" label="差额数" />
			</el-table-column>
		</el-table> -->






		<div class="flex-justify-end top-20">
			<el-button type="primary" class="save-btn" @click="saveProgramme">保存</el-button>
		</div>
	</div>
</template>
<style scoped lang="scss"></style>